<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title>${apply == null ? '发布' : '编辑'}栏目</title>
<%@include file="../include/commonFile.jsp"%>
<link rel="stylesheet" href="${ctx}/css/common/list.css">
<link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
<style type="text/css">

.layui-form-radio {
	display: block !important;
}

.text-place {
	padding-left: 30px;
	color: #aaa;
}
</style>
</head>
<!--头部-->
<%@include file="../include/header.jsp"%>
<div class="index-outside">
	<%@include file="../include/sidebar.jsp"%>
	<!--内容-->
	<section>
		<div class="section-main">

			<!-- 正文请写在这里 -->
			<div class="add-form-content">
			<form id="myForm" class="layui-form mt20" method="post" action="${ctx}/subject/apply/save.do">
				<div class="layui-form-item">
					<label class="layui-form-label">手机官网</label>
					<div class="layui-input-block">
						<input type="text"  class="layui-input" value="${subject.name}" readonly="readonly" />
						<input type="hidden" name="subjectId" value="${subject.id}" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">栏目名称<span class="f-verify-red">*</span></label>
					<div class="layui-input-block">
						<input type="text" name="name" lay-verify="name"  autocomplete="off" placeholder="栏目名称" class="layui-input"
							value="${apply.name}">
						<input type="hidden" name="id" value="${apply.id}" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">栏目图标<span class="f-verify-red">*</span></label>
					<div class="cover-content">
						<input type="hidden" name="picture" id="pic" lay-verify="pic" value="${apply.picture}" />
						<c:if test="${apply == null || empty apply.picture}">
							<span class="cover-img" style="width: 120px; background-image: url('${ctx}/image/posterImg.png');"></span>
						</c:if>
						<c:if test="${apply != null && not empty apply.picture}">
							<span class="cover-img" style="width: 120px; background-image: url('${apply.picture}')"></span>
						</c:if>
						<a class="layui-btn layui-btn-danger sel-pic-img">+添加图片</a>
						<div class="form-word-aux">建议尺寸：120x120</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">栏目类型<span class="f-verify-red">*</span></label>
					<div class="layui-input-block">
						<input type="radio" name="type" lay-filter="applyType" value="url" title="链接" ${apply == null || apply.type == 'url' ? 'checked="checked"' : ''} />
						<span class="text-place">可以链接到一个固定的网页链接地址</span>
						
						<input type="radio" name="type" lay-filter="applyType" value="article" title="单篇文章" ${apply != null && apply.type == 'article' ? 'checked="checked"' : ''} />
						<span class="text-place">可以指向一篇文章内容 </span>
						
						<input type="radio" name="type" lay-filter="applyType" value="channel" title="文章列表" ${apply != null && apply.type == 'channel' ? 'checked="checked"' : ''} />
						<span class="text-place">可以添加多篇文章内容</span>
					</div>
				</div>
				<!-- 链接 -->
				<div class="layui-form-item" id="type_url" ${apply == null || apply.type == 'url' ? 'style="display:block"' : 'style="display:none"'}>
					<label class="layui-form-label">链接<span class="f-verify-red">*</span></label>
					<div class="layui-input-block">
						<input type="text" name="url" lay-verify="url"  autocomplete="off" placeholder="单链接" class="layui-input" value="${apply.url}" />
					</div>
				</div>
				<!-- 频道封面图 -->
				<div class="layui-form-item" id="type_channel_pic" ${apply != null && apply.type == 'channel' ? 'style="display:block"' : 'style="display:none"'}>
					<label class="layui-form-label">列表封面图</label>
					<div class="cover-content">
						<input type="hidden" name="channelPicture" lay-verify="channelPic" value="${articleGroup.picture}" />
						<c:if test="${articleGroup == null || empty articleGroup.picture}">
							<span class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
						</c:if>
						<c:if test="${articleGroup != null && not empty articleGroup.picture}">
							<span class="cover-img" style="background-image:url('${articleGroup.picture}')"></span>
						</c:if>
						<a class="layui-btn layui-btn-danger sel-pic-img">+添加图片</a>
						<div class="form-word-aux">建议尺寸：800x450</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">排序号</label>
						<div class="layui-input-inline">
							<input type="text" name="sort" lay-verify="sort" autocomplete="off" class="layui-input" value="${apply.sort}" >
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">描述</label>
					<div class="layui-input-block">
						<textarea name="remarks" placeholder="栏目描述" lay-verify="remarks" class="layui-textarea" >${apply.remarks}</textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
						<a href="${ctx}/subject/apply/applyList.do?subjectId=${subject.id}" class="layui-btn layui-btn-primary">取消</a>
					</div>
				</div>
			</form>
			</div>
		</div><!--底部-->
		<%@include file="../include/footer.jsp"%>
	</section>
</div>
<script>
	var radioValue = null;


	$(function() {
        layui.use([ 'form' ], function() {
            var form = layui.form, laydate = layui.laydate;

            form.on('radio(applyType)', function(data) {
                radioValue = data.value;
                if (radioValue == "url") { // 链接
                    $("#type_url").show();
                    $("#type_channel_name").hide();
                    $("#type_channel_pic").hide();
                } else if (radioValue == "article") { // 文章
                    $("#type_url").hide();
                    $("type_url [type=text]").val("");
                    $("#type_channel_name").hide();
                    $("#type_channel_pic").hide();
                } else if(radioValue == "channel"){ // 频道
                    $("#type_url").hide();
                    $("type_url [type=text]").val("");
                    $("#type_channel_name").show();
                    $("#type_channel_pic").show();
                }
            });

            //自定义验证规则
            form.verify({
                name : function(value) {
                    if (value == "") {
                        return '请填写栏目名称';
                    }
                },
                pic : function(value) {
                    if (value == "") {
                        return "请上传栏目图标";
                    }
                },
				url: function (value) {
					if (radioValue == null) {
						var type = $("[name=type]:checked").val();
						if (type == "url") {
							if (value == "") {
								return "请设置链接";
							} else if (!util.checkLink(value)) {
								return "链接格式错误";
							}
						}
					} else {
						if (radioValue == "url") {
							if (value == "") {
								return "请设置链接";
							} else if (!util.checkLink(value)) {
								return "链接格式错误";
							}
						}
					}
				},
                sort : function(value) {
                    if (!util.checkNumber(value)) {
                        return "请输入正确的数字";
                    }
                }
// 			,
// 			channelName : function(value) {
// 				if (radioValue == "channel" && value == "") {
// 					return "请设置频道名称";
// 				}
// 			},
// 			channelPic : function(value) {
// 				if (radioValue != null) {
// 					if (radioValue == "channel" && value == "") {
// 						return "请设置列表封面图";
// 					}
// 				} else {
// 					var type = $("[name=type]:checked").val();
// 					if (type == "channel" && value == "") {
// 						return "请设置列表封面图";
// 					}
// 				}
// 			}
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var action = $("#myForm").attr("action");
                    $.post(action, $('#myForm').serialize(), function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("提交成功", function () {
                                location.href = "${ctx}/subject/apply/applyList.do?subjectId=" + res.data.subjectId + "&applyId=" + res.data.applyId;
                            });
                        } else {
                            util.layerMsgError("提交失败")
                        }
                    })
                });
                return false;
            });
        });
        $('.sel-pic-img').click(function () {
            var that = this;
            txz.openSelImg({
                min: 1,
                max: 1,
                type: '<%=TargetType.SUBJECT.getCode()%>',
                cb: function (imgs) {
                    $(that).closest(".cover-content").find(".cover-img").css('background-image', 'url(' + imgs[0].path + ')');
                    $(that).closest(".cover-content").find("[type=hidden]").val(imgs[0].path);
                }
            })
        })
	})
</script>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '手机官网管理',
            href: '${ctx}/subject/subject/subjectList.do'
        },{
            name: '${subject.name}',
            href: '${ctx}/subject/apply/applyList.do?subjectId=${subject.id}'
        },{
            name: '${apply == null ? '发布' : '编辑'}栏目',
            curr: true
        }],
        btns:[{
            name: '返回',
            href: '${ctx}/subject/apply/applyList.do?subjectId=${subject.id}',
            icon: 'back'
        }]
    });
</script>
</body>
</html>